<template>
  <div>
    <el-card style="width: 100%" shadow="always">
      <el-button type="primary" @click="addForm">添加分类</el-button>
    </el-card>
    <el-table :border="true" :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="分类编号" min-width="120" />
      <el-table-column prop="name" label="分类名称" min-width="150" />
      <el-table-column prop="description" label="分类描述" min-width="200" />
      <el-table-column prop="scene" label="适用场景" min-width="150" />
      <el-table-column
        prop="maintenanceCycle"
        label="维护周期"
        min-width="100"
      />
      <el-table-column prop="remarks" label="备注" min-width="200" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scoped">
          <el-button link type="primary" size="small" @click="edit(scoped.row)"
            >编辑</el-button
          >
          <el-button link type="primary" size="small" @click="del(scoped.row)"
            >删除</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="detial(scoped.row)"
            >查看装备</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogEdit" title="编辑分类" width="400">
      <div class="form">
        <div class="form-item">
          <span class="title">分类名称</span>
          <div class="content">
            <el-input
              v-model="form.name"
              style="width: 240px"
              placeholder="分类名称"
            />
          </div>
        </div>
        <div class="form-handle">
          <el-button type="primary" @click="saveEdit">确定</el-button>
          <el-button type="primary" @click="dialogEdit = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog v-model="dialogAdd" title="添加分类" width="400">
      <div class="form">
        <div class="form-item">
          <span class="title">分类名称</span>
          <div class="content">
            <el-input
              v-model="form.name"
              style="width: 240px"
              placeholder="分类名称"
            />
          </div>
        </div>
        <div class="form-handle">
          <el-button type="primary" @click="saveAdd">确定</el-button>
          <el-button type="primary" @click="dialogAdd = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog v-model="dialogDetial" title="查看装备" width="800">
      <el-table :data="tableDataDetial" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="name" label="装备名称" width="180" />
        <el-table-column prop="count" label="数量" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";

const tableData = reactive([
  {
    id: "CT20231101",
    name: "工具设备",
    description: "用于日常维修和临时安装的工具",
    scene: "办公区维修、应急维护",
    maintenanceCycle: "每季度检查",
    remarks: "包括折叠梯、手电钻等"
  },
  {
    id: "CT20231102",
    name: "通讯设备",
    description: "用于团队间信息沟通的设备",
    scene: "日常巡查、紧急指挥",
    maintenanceCycle: "每月检查",
    remarks: "包括对讲机、无线耳机等"
  },
  {
    id: "CT20231103",
    name: "安全设备",
    description: "用于安全防护和风险控制的设备",
    scene: "执法现场、应急处理",
    maintenanceCycle: "每半年检查",
    remarks: "包括灭火器、防护头盔等"
  },
  {
    id: "CT20231104",
    name: "灯光设备",
    description: "提供夜间或低光环境下的照明支持",
    scene: "夜间巡查、临时施工",
    maintenanceCycle: "每季度检查",
    remarks: "包括移动照明灯、照明手电筒"
  },
  {
    id: "CT20231105",
    name: "防护装备",
    description: "用于保护人员安全的穿戴类装备",
    scene: "高风险作业、恶劣天气",
    maintenanceCycle: "每半年检查",
    remarks: "包括雨衣、防护手套、防水靴"
  },
  {
    id: "CT20231106",
    name: "标志设备",
    description: "用于执法现场或施工区域的警示标志",
    scene: "临时封闭、管控区域",
    maintenanceCycle: "每年检查",
    remarks: "包括警示标志牌、隔离栏"
  },
  {
    id: "CT20231107",
    name: "监控设备",
    description: "用于现场记录和实时监控的设备",
    scene: "执法巡查、环境监测",
    maintenanceCycle: "每季度维护",
    remarks: "包括执法记录仪、摄像机等"
  },
  {
    id: "CT20231108",
    name: "医疗设备",
    description: "用于紧急情况下的医疗急救",
    scene: "事故处理、突发事件",
    maintenanceCycle: "每月检查",
    remarks: "包括急救箱、急救包"
  }
]);

const form = ref({
  id: "",
  name: "",
  description: "",
  scene: "",
  maintenanceCycle: "",
  remarks: ""
});
const dialogEdit = ref(false);
const dialogAdd = ref(false);
const dialogDetial = ref(false);
const rowIndex = ref(0);

function edit(row) {
  dialogEdit.value = true;
  rowIndex.value = tableData.findIndex(i => i.id === row.id);
  form.value = { ...row };
}

function saveEdit() {
  setTimeout(() => {
    ElMessage({
      message: "编辑成功",
      type: "success"
    });
    dialogEdit.value = false;
  }, 500);
}

function del(row) {
  rowIndex.value = tableData.findIndex(i => i.id === row.id);
  setTimeout(() => {
    tableData.splice(rowIndex.value, 1);
    ElMessage({
      message: "删除成功",
      type: "success"
    });
  }, 500);
}

function addForm() {
  form.value = {
    id: "",
    name: "",
    description: "",
    scene: "",
    maintenanceCycle: "",
    remarks: ""
  };
  dialogAdd.value = true;
}

function saveAdd() {
  setTimeout(() => {
    tableData.push({
      id: `CT202311${tableData.length + 1}`,
      ...form.value
    });
    ElMessage({
      message: "添加成功",
      type: "success"
    });
    dialogAdd.value = false;
  }, 500);
}

function detial() {
  dialogDetial.value = true;
}
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 12px;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;

  .form-handle {
    display: flex;
    grid-column: span 2;
    justify-content: end;
    margin-top: 12px;
  }
}
</style>
